<template>
	<view class="container">
		<view class="list-box">
			<view class="item flex-just-between">
				<view class="left flex-item-center">
					<image src="/static/msg-icon.png" mode=""></image>
					<text>{{ $t('notifications.receiveNotification') }}</text>
				</view>
				<switch class="custom-switch" checked @change="switchChange" color="#52A5F3" />
			</view>
			<view class="item flex-just-between" @click="jumpAccountSecurity()">
				<view class="left flex-item-center">
					<image src="/static/security-icon.png" mode=""></image>
					<text>{{ $t('notifications.accountSecurity') }}</text>
				</view>
				<uni-icons type="right" :size="24"></uni-icons>
			</view>
			<view class="item flex-just-between" @click="jumpSettingLocale">
				<view class="left flex-item-center">
					<image src="/static/set-icon.png" mode=""></image>
					<text>{{ $t('notifications.locale') }}</text>
				</view>
				<uni-icons type="right" :size="24"></uni-icons>
			</view>
			
		</view>

		<button class="logout-btn" @click="logOut">
			{{ $t('notifications.logOut') }}
		</button>

		<!-- 注销弹出层 -->
		<uni-popup class="popUpAlert" ref="popup" type="bottom" background-color="#fff" :border-radius="72">
			<view class="popup-content">
				<view class="text-info">{{ $t('notifications.logoutConfirm') }}</view>
				<view class="exit-btn" @click="handleLogout">{{ $t('notifications.exitAccount') }}</view>
				<view class="cancel-btn" @click="cancelPop">{{ $t('notifications.cancel') }}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
			switchChange(e) {
				console.log('switch 状态变更:', e.detail.value);
			},
			logOut() {
				this.$refs.popup.open();
			},
			handleLogout() {
				uni.showToast({
					title: this.$t('notifications.logoutSuccess'),
					icon: 'none'
				});
				this.$refs.popup.close();
				uni.removeStorageSync('token')
				uni.navigateTo({
					url: '/pages/auth/register'
				})
			},
			cancelPop() {
				this.$refs.popup.close();
			},
			jumpAccountSecurity() {
				uni.navigateTo({
					url: '/pages/my/security/security'
				})
			},
			jumpSettingLocale() {
				uni.navigateTo({
					url: '/pages/my/notification/settingLocale'
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.container {
		.list-box {
			padding: 0 52rpx;

			.item {
				height: 110rpx;
				font-size: 32rpx;

				image {
					margin-right: 30rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.logout-btn {
			width: 556rpx;
			height: 96rpx;
			background-color: #E9E9E9;
			border-radius: 49rpx;
			font-size: 36rpx;
			position: absolute;
			left: 96rpx;
			bottom: 10%;

			&::after {
				border: none;
			}
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1000;
		}

		.popup-content {
			padding: 40rpx 0;
			text-align: center;

			.text-info {
				color: #999;
				font-size: 28rpx;
				margin-bottom: 42rpx;
			}

			.exit-btn,
			.cancel-btn {
				height: 124rpx;
				line-height: 124rpx;
				font-size: 32rpx;
			}

			.exit-btn {
				margin-top: 42rpx;
				border-bottom: 12rpx solid #EDEDED;
				color: #FF6464;
			}

			.cancel-btn {
				color: #666;
			}
		}
	}
</style>